<template>
  <s-layout title="我的发布" navbar="inner" :bgStyle="{ color: '#f8f9fa' }">
    <view class="my-release-page">
      <view class="filter-bar">
        <scroll-view scroll-x class="filter-scroll">
          <view class="filter-list">
            <view 
              class="filter-item"
              :class="{ active: currentType === null }"
              @tap="filterByType(null)"
            >
              全部
            </view>
            <view 
              class="filter-item"
              :class="{ active: currentType === type.value }"
              v-for="type in releaseTypes" 
              :key="type.value"
              @tap="filterByType(type.value)"
            >
              {{ type.name }}
            </view>
          </view>
        </scroll-view>
      </view>

      <view class="content-area">
        <view v-if="releaseList.length > 0" class="release-list">
          <view 
            class="release-item" 
            v-for="item in releaseList" 
            :key="item.id"
            @tap="viewDetail(item)"
          >
            <view class="item-header">
              <view class="title-row">
                <text class="release-title">{{ item.title }}</text>
                <view class="status-badge" :class="getStatusClass(item.status)">
                  {{ getStatusText(item.status) }}
                </view>
              </view>
              <view class="type-tag">{{ getTypeName(item.type) }}</view>
            </view>
            
            <view class="item-content">
              <text class="synopsis">{{ item.synopsis }}</text>
              <view v-if="item.pics" class="image-grid">
                <image 
                  v-for="(pic, index) in item.pics.split(',').slice(0, 3)" 
                  :key="index"
                  :src="pic" 
                  class="preview-image" 
                  mode="aspectFill"
                />
                <view v-if="item.pics.split(',').length > 3" class="more-images">
                  +{{ item.pics.split(',').length - 3 }}
                </view>
              </view>
            </view>
            
            <view class="item-footer">
              <view class="time-info">
                <text class="create-time">{{ formatTime(item.createTime) }}</text>
                <text v-if="item.reviewTime" class="review-time">
                  审核时间：{{ formatTime(item.reviewTime) }}
                </text>
              </view>
              <view class="action-buttons">
                <button 
                  v-if="item.status === 0 || item.status === 2" 
                  class="edit-btn" 
                  @tap.stop="editRelease(item)"
                >
                  编辑
                </button>
                <button class="delete-btn" @tap.stop="deleteRelease(item)">删除</button>
              </view>
            </view>
            
            <view v-if="item.remark && item.status === 2" class="reject-reason">
              <text class="reason-label">拒绝原因：</text>
              <text class="reason-text">{{ item.remark }}</text>
            </view>
          </view>
        </view>
        
        <s-empty 
          v-else-if="!loading" 
          icon="/static/soldout-empty.png" 
          text="暂无发布内容"
        />
        
        <view v-if="loading" class="loading-state">
          <text class="loading-text">加载中...</text>
        </view>
      </view>
      
      <view class="fab-button" @tap="goToPublish">
        <text class="fab-icon">+</text>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import sheep from '@/sheep'
import dayjs from 'dayjs'

const releaseTypes = ref([
  { value: 2, name: '推荐' },
  { value: 3, name: '视频' },
  { value: 7, name: '文旅' }
])

const currentType = ref(null)
const releaseList = ref([])
const loading = ref(false)

async function loadReleaseList() {
  loading.value = true
  
  try {
    const params = {}
    if (currentType.value !== null) {
      params.type = currentType.value
    }
    
    const res = await sheep.$api.release.list(params)
    if (res) {
      releaseList.value = res
    }
  } catch (error) {
    console.error('加载发布列表失败:', error)
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

function filterByType(type) {
  currentType.value = type
  loadReleaseList()
}

function getStatusText(status) {
  const statusMap = {
    0: '审核中',
    1: '已通过',
    2: '已拒绝'
  }
  return statusMap[status] || '未知'
}

function getStatusClass(status) {
  const classMap = {
    0: 'pending',
    1: 'approved',
    2: 'rejected'
  }
  return classMap[status] || ''
}

function getTypeName(type) {
  const typeItem = releaseTypes.value.find(item => item.value === type)
  return typeItem ? typeItem.name : '未知'
}

function formatTime(timeStr) {
  return dayjs(timeStr).format('YYYY-MM-DD HH:mm')
}

function viewDetail(item) {
  uni.navigateTo({
    url: `/pages/user/release-detail?id=${item.id}`
  })
}

function editRelease(item) {
  uni.navigateTo({
    url: `/pages/user/edit-release?id=${item.id}`
  })
}

function deleteRelease(item) {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条发布吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await sheep.$api.release.remove(item.id)
          uni.showToast({ title: '删除成功', icon: 'success' })
          loadReleaseList()
        } catch (error) {
          uni.showToast({ title: '删除失败', icon: 'none' })
        }
      }
    }
  })
}

function goToPublish() {
  sheep.$router.go('/pages/publish/index')
}

onMounted(() => {
  loadReleaseList()
})

onShow(() => {
  loadReleaseList()
})
</script>

<style lang="scss" scoped>
$primary-color: #8B4513;
$secondary-color: #DAA520;
$text-dark: #333;
$text-light: #666;
$border-color: #e5e5e5;
$bg-light: #f8f9fa;

.my-release-page {
  min-height: 100vh;
  background: $bg-light;
  padding-bottom: 100rpx;
}

.filter-bar {
  background: white;
  border-bottom: 1rpx solid $border-color;
  padding: 20rpx 0;
}

.filter-scroll {
  width: 100%;
  white-space: nowrap;
}

.filter-list {
  display: flex;
  gap: 20rpx;
  padding: 0 30rpx;
}

.filter-item {
  padding: 15rpx 30rpx;
  border-radius: 30rpx;
  background: $bg-light;
  color: $text-light;
  font-size: 26rpx;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.3s ease;

  &.active {
    background: $primary-color;
    color: white;
  }
}

.content-area {
  flex: 1;
}

.release-list {
  padding: 20rpx 30rpx;
}

.release-item {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  transition: transform 0.2s ease;

  &:active {
    transform: scale(0.98);
  }
}

.item-header {
  margin-bottom: 20rpx;
}

.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.release-title {
  font-size: 32rpx;
  font-weight: bold;
  color: $text-dark;
  flex: 1;
  margin-right: 20rpx;
}

.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  color: white;

  &.pending {
    background: #ffa500;
  }

  &.approved {
    background: #28a745;
  }

  &.rejected {
    background: #dc3545;
  }
}

.type-tag {
  display: inline-block;
  padding: 6rpx 12rpx;
  background: $bg-light;
  color: $text-light;
  font-size: 22rpx;
  border-radius: 12rpx;
}

.item-content {
  margin-bottom: 20rpx;
}

.synopsis {
  font-size: 28rpx;
  color: $text-light;
  line-height: 1.5;
  margin-bottom: 15rpx;
  display: block;
}

.image-grid {
  display: flex;
  gap: 10rpx;
  align-items: center;
}

.preview-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
}

.more-images {
  width: 120rpx;
  height: 120rpx;
  background: $bg-light;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $text-light;
  font-size: 24rpx;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.time-info {
  flex: 1;
}

.create-time {
  font-size: 24rpx;
  color: $text-light;
  display: block;
  margin-bottom: 5rpx;
}

.review-time {
  font-size: 22rpx;
  color: $text-light;
}

.action-buttons {
  display: flex;
  gap: 15rpx;
}

.edit-btn, .delete-btn {
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  border: none;
}

.edit-btn {
  background: $secondary-color;
  color: white;
}

.delete-btn {
  background: #dc3545;
  color: white;
}

.reject-reason {
  margin-top: 20rpx;
  padding: 20rpx;
  background: #fff5f5;
  border-radius: 12rpx;
  border-left: 4rpx solid #dc3545;
}

.reason-label {
  font-size: 24rpx;
  color: #dc3545;
  font-weight: bold;
}

.reason-text {
  font-size: 26rpx;
  color: $text-light;
  margin-left: 10rpx;
}

.loading-state {
  display: flex;
  justify-content: center;
  padding: 60rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: $text-light;
}

.fab-button {
  position: fixed;
  bottom: 40rpx;
  right: 40rpx;
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(45deg, $primary-color, $secondary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.3);
  z-index: 100;

  &:active {
    transform: scale(0.9);
  }
}

.fab-icon {
  font-size: 48rpx;
  color: white;
  font-weight: bold;
}
</style>